<template>
  <div class="wft-senior-container-contextmenu-panel" :style="panelPositionStyle">
    <div @click="paste">粘贴</div>
    <div @click="clearContainerPanel">清空画板</div>
  </div>
</template>
<script>
import { deepClone, getUuid } from '../../../utils';
import Bus from '../../../utils/bus'
export default {
  props: {
    top: {
      type: [Number, String],
      default: 0
    },
    bottom: {
      type: [Number, String],
      default: 0
    },
    left: {
      type: [Number, String],
      default: 0
    },
    right: {
      type: [Number, String],
      default: 0
    },
    curComp: {
      type: Object,
      required: true
    },
    curCopyComp: {
      type: [Object, null],
      default: () => null
    },
    id: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 100
    }
  },
  computed: {
    panelPositionStyle() {
      return {
        top: typeof this.top == 'number' ? this.top + 'px' : this.top,
        bottom: typeof this.bottom == 'number' ? this.bottom + 'px' : this.bottom,
        left: typeof this.left == 'number' ? this.left + 'px' : this.left,
        right: typeof this.right == 'number' ? this.right + 'px' : this.right,
      }
    },
    idGlobal: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    // 粘贴
    paste(event) {
      if(!this.curCopyComp) return
      if(this.curCopyComp.type == 'senior') {
        return this.$message.warning('容器组件不可再嵌套高级组件！')
      }
      if(dragData.curCom.type == 'form') {
        return this.$message.warning('容器组件不可再嵌套表单组件！')
      }
      const pushComp = deepClone(this.curCopyComp)
      const seniorContainerPanel = document.getElementById(this.id)
      const { left, top, width, height } = seniorContainerPanel.getBoundingClientRect()
      pushComp.grid.left = event.clientX - left
      pushComp.grid.top = event.clientY - top
      pushComp.resizeGrid.left = ((pushComp.grid.left / width) * 100).toFixed(0) + '%'
      pushComp.resizeGrid.top = ((pushComp.grid.top / height) * 100).toFixed(0) + '%'
      pushComp.resizeGrid.width = ((pushComp.grid.width / width) * 100).toFixed(0) + '%'
      pushComp.resizeGrid.height = ((pushComp.grid.height / height) * 100).toFixed(0) + '%'
      pushComp.id = getUuid()
      pushComp.parentId = this.curComp.id
      pushComp.parentCompKey = this.curComp.compKey
      pushComp.field = pushComp.compKey + 'Field' + this.idGlobal++
      this.curComp.children.push(pushComp)
      Bus.$emit('addStack')
    },
    // 清空画板
    clearContainerPanel() {
      this.curComp.children = []
      Bus.$emit('addStack')
    }
  }
}
</script>
<style scoped>
.wft-senior-container-contextmenu-panel {
  width: 150px;
  border: 1px solid #eee;
  border-radius: 3px;
  -webkit-box-shadow:0 0 10px #eee;
  -moz-box-shadow:0 0 10px #eee;
  box-shadow:0 0 10px #eee;
  z-index: 99;
  position: absolute;
  background-color: #fff;
  padding: 5px 0;
}

.wft-senior-container-contextmenu-panel > div {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 13px;
  padding: 0 12px;
  box-sizing: border-box;
  cursor: pointer;
}
.wft-senior-container-contextmenu-panel > div:hover {
  background-color: #4393e6;
  color: #fff;
}
</style>
